<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin_fragments :: head(管理后台欢迎页)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻发布系统管理</title>

</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <label style="margin-right: 5px">请选择省份</label>
                    <div class="layui-inline layui-show-xs-block layui-col-space5 layui-form">
                        <select id="selectedYear" name="typeName">
                            <option value="2018">2018</option>
                            <option value="2019">2019</option>
                            <option value="2020">2020</option>
                            <option value="2021">2021</option>
                        </select>
                    </div>

                    <!--搜索按钮-->
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn " id="search_btn" lay-submit="" lay-filter="search"><i
                                class="layui-icon">&#xe615;</i></button>
                    </div>
                </div>

            </div>
            <div class="layui-card ">
                <div class="layui-panel">
                    <div style="padding: 18px; display: flex; justify-content: center">
                        <span id="title" style="font-size: 15px">2018年~2021年平均价格统计</span>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="map">
                        <div class="chart layui-col-sm12">图表模块</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="admin_fragments :: script"></div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script th:src="@{/js/china.js}"></script>
<!--    地图样式-->
<script th:inline="javascript">
    /*<![CDATA[*/
    const title = document.querySelector('#title');
    $("#searchForm").submit(function (event) {
        event.preventDefault(); // 阻止表单默认提交行为
        var selectedYear = $("input[name='year']").val(); // 获取已选择的年份
        loadDataAndRenderMap(selectedYear); // 调用新创建的函数以加载数据并显示地图
    });

    layui.use(['form'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        // 初始化选择框
        form.render('select');

        $(document).on('click', '#search_btn', function (data) {
            data.preventDefault()
            var selectedYear = $('#selectedYear').val();
            console.log(selectedYear);
            loadDataAndRenderMap(selectedYear); // 调用新创建的函数以加载数据并显示地图

        })
    });

    function loadDataAndRenderMap(year) {
        var areaData = {}
        // 使用AJAX调用服务器接口-->
        $.ajax({
            url: "/area/data/year",
            type: "GET",
            data: {
                year: year
            },
            success: function (dataList) {
                title.textContent = year + '年所有省份平均价格统计';
                areaData = dataList;
                var myChart = echarts.init(document.querySelector('.map .chart'));
                layer.alert('查询成功！', {icon: 1}, function (index) {
                    layer.close(index);
                });
                var mapName = 'china'
                console.log(areaData)
                var data = areaData.map(priceData => ({
                    name: priceData.province,
                    value: priceData.averagePrice,
                }));
                var geoCoordMap = {};

                // Rest of your code here...
                /*获取地图数据*/
                myChart.showLoading();
                var mapFeatures = echarts.getMap(mapName).geoJson.features;
                myChart.hideLoading();
                mapFeatures.forEach(function (v) {
                    // 地区名称
                    var name = v.properties.name;
                    // 地区经纬度
                    geoCoordMap[name] = v.properties.cp;

                });

                console.log(data)
                var max = 480,
                    min = 9; //
                var maxSize4Pin = 100,
                    minSize4Pin = 20;

                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].name == '黑龙')
                            data[i].name = '黑龙江'
                        if (data[i].name == '内蒙')
                            data[i].name = '内蒙古'
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value),
                            });
                        }
                    }
                    return res;
                };
                option = {

                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            if (typeof (params.value)[2] == "undefined") {
                                var toolTiphtml = ''
                                for (var i = 0; i < data.length; i++) {
                                    if (params.name == data[i].name) {
                                        toolTiphtml += data[i].name + ':' + data[i].value
                                    }
                                }
                                console.log(toolTiphtml)
                                // console.log(convertData(data))
                                return toolTiphtml;
                            } else {
                                var toolTiphtml = ''
                                for (var i = 0; i < data.length; i++) {
                                    if (params.name == data[i].name) {
                                        toolTiphtml += data[i].name + ':' + data[i].value
                                    }
                                }
                                console.log(toolTiphtml)
                                return toolTiphtml;
                            }
                        }
                    },
                    visualMap: {
                        show: true,
                        min: 0,
                        max: 200,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'], // 文本，默认为数值文本
                        calculable: true,
                        seriesIndex: [1],
                        inRange: {
                            color: ['#e6f7ff', '#1890FF', '#0050b3'] // 渐变颜色
                        }
                    },
                    geo: {
                        show: true,
                        map: mapName,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        roam: false,
                        itemStyle: {
                            normal: {
                                areaColor: 'rgba(20,41,87,0.8)',
                                borderColor: '#195bb9',
                            },
                            emphasis: {
                                areaColor: '#2B91B7',
                            }
                        }
                    },
                    series: [{
                        name: '散点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(data),
                        symbolSize: function (val) {
                            return val[2] / 10;
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#05C3F9'
                            }
                        }
                    },
                        {
                            type: 'map',
                            map: mapName,
                            geoIndex: 0,
                            aspectScale: 0.75, //长宽比
                            showLegendSymbol: false, // 存在legend时显示
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: false,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            },
                            roam: true,
                            itemStyle: {
                                normal: {
                                    areaColor: '#031525',
                                    borderColor: '#3B5077',
                                },
                                emphasis: {
                                    areaColor: '#2B91B7'
                                }
                            },
                            animation: false,
                            data: data
                        },
                        {
                            name: 'Top 5',
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            data: convertData(data.sort(function (a, b) {
                                return b.value - a.value;
                            }).slice(0, 5)),
                            symbolSize: function (val) {
                                return val[2] / 10;
                            },
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            hoverAnimation: true,
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'yellow',
                                    shadowBlur: 10,
                                    shadowColor: 'yellow'
                                }
                            },
                            zlevel: 1
                        },

                    ]
                };
                myChart.setOption(option);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // 异常处理
                console.error(textStatus, errorThrown);
            }
        });

        window.addEventListener('resize', function () {
            myChart.resize();
        });
    };
    /*]]>*/
</script>
<script>
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    $(document).ready(function () {
        $('.ui.accordion').accordion({duration: 'click'});
        $('.ui.dropdown').dropdown();

        title.textContent = '2018年所有省份平均价格统计';

        loadDataAndRenderMap("2018"); // 页面加载时显示2018年的地图数据
    });
</script>
</body>
</html>